<template>
	<div id="newActivity">
		<div class="content-box">
			<div v-loading="loadingChoose" element-loading-text="拼命加载中">
				<div v-show="$store.state.publicAll.tplName.length!=0">
					<div class="filter-wrap">
						<div class="filter-box">
							<!--<div class="filter-item clearfix">
								<div class="filter-item-left">活动目标:</div>
								<div class="filter-item-right clearfix"><span  class="active" >全部</span><span>拉新</span><span>活跃</span></div>
							</div>-->
							<div class="filter-item clearfix">
								<div class="filter-item-left">分类模板:</div>
								<div class="filter-item-right clearfix">
									<span :class="{'active':activeTbsSpan==index}" v-for="(item,index) in $store.state.publicAll.tplName" :key="index" @click="modelSelect(item,index)">{{item.model_name}}</span>
								</div>
							</div>
							<!--<div class="filter-item clearfix">
								<div class="filter-item-left"></div>
								<div class="filter-item-right clearfix"><button>节日活动</button><button>新玩法</button><span class="more-play">更多玩法</span></div>
							</div>-->
						</div>
					</div>
					<div class="template-container">
					
						<ul class="clearfix tpl-ul"  >
							<li v-for="(list,index) in $store.state.publicAll.tableData" :key="index">
								<div class="active-list-box">
									<div class="template-content">
										<p>{{list.name}}</p>
										<div class="template-active-img" @mouseenter="qrcodeEvent($event,list)" >
											<img  v-lazy="ImgUrl+list.thumb">
											<div class="template-qrcode">
												<p>扫一扫预览</p>
												<div class="code-box">
													<div class="qrcode text-center"></div>
												</div>
												<span @click="useTemplate(list)">使用</span>
												<a class="down-load" :href="'http://admin.testmorefun.chinamcloud.com/api/web-api/template?rule='+list.template" >下载</a>
											</div>
										</div>
										<div class="new-icon"></div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="text-hit" v-show="$store.state.publicAll.tplAll.length==0">{{errorText}}</div>
			</div>
			<div class="page-footer text-center" >
                <el-pagination
                    small
                    layout="prev, pager, next"
                    :total="total"
					:page-size="limit"
                    @current-change="pageChange"
                    >
                </el-pagination>
            </div>
		</div>
	</div>
</template>
<script>
import { baseImgPath } from './../../config/env'
import * as api from './../../api/api';
 import {mapGetters} from 'vuex';
 import QRCode from 'qrcodejs2'
	export default {
		data(){
			return {
				ImgUrl:baseImgPath,
				activeTbsSpan:0,//分类模板
				modulesClassShow:'', //当前选择的模板
				loadingChoose:false,	
				errorText:'暂无活动',
				qrcodeItem:null,
				//分页
				current_page:1, //当前页码
                last_page:'',//最后一页
                limit:8, //一页显示多少条
                total:0, //总条数
			}
		},
		methods: {
			qrcodeEvent (e,item) {
				let vm =this;
				let eventId=e.target.children[1].children[1].children[0];
				if(eventId.children.length==0){
					vm.qrcodeItem = new QRCode(eventId, {  
						width: 150,  // 设置宽度 
						height: 150, // 设置高度
						text: vm.ImgUrl+item.act_try_url
					}) 
				}	
            },
			useTemplate(item){
				if(item.model.type==0){
					if(item.template=="vote"||item.template=="multiple-vote"||item.template=="vote-screen"||item.template=="poll"||item.template=="ballot"||item.template=="white-vote"){ //投票
						this.$router.push({name:'voteScreen',query:{'tplModelId':item.id,'background':item.thumb, 'model_id':item.model_id,'tplName':item.template}});
					}else 
					// if(item.template=='default'){//报名
						// this.$router.push({name:'surveyTpl',query:{surveyTplId:'web/modelRule?template_id=4c94192d-759b-4eb1-9ce6-ff965d289d52'}});	
					// }else 
					if(item.template=="prize-code"){ //口令
						this.$router.push({name:'setTemplate_code',query:{'tplModelId':item.id,'background':item.thumb,'bannerImg':item.banner_img,'model_id':item.model_id}});
					}else { 
						this.$router.push({name:'commonTpl',query:{'tplModelId':item.id,'background':item.thumb,'bannerImg':item.banner_img,'model_id':item.model_id}});
					} 
					// console.log(item);
				} else{
					if(item.template=="redpackage-rain"||item.template=="scratch"){
						this.$router.push({name:'commonTpl',query:{'tplModelId':item.id,'background':item.thumb,'bannerImg':item.banner_img,'model_id':item.model_id}});
					}
				}
			},
			//选择分类模板
			modelSelect(item,index){
				let vm = this;
				vm.activeTbsSpan=index;
				vm.$store.state.publicAll.modelIdIndex=index;
				vm.modulesClassShow=item.model_id;
				vm.$store.state.publicAll.tplList.forEach((list,index)=>{
					if(list.model_id==item.model_id){
						let arr=[];
						list.tpls.forEach((a,b)=>{
							if(a.template!='shake'&&a.template!='roulette'&&a.template!='golden-eggs'&&a.template!='quiz'&&a.template!="enroll"&&a.template!='exponent'&&a.template!='caizhangdie'&&a.template!='check-in'){
								arr.push(a);
								// console.log(a.template);
							}
						}); 
						vm.$store.state.publicAll.tplAll=arr;
						// vm.$store.state.publicAll.tplAll=list.tpls;
						vm.pagination(1,vm.$store.state.publicAll.tplAll);
					}
				})
			},
			fetchPrdList(){
				let vm = this;
				vm.loadingChoose=true;
				api.fetchActivityList({}).then(res=>{
					vm.loadingChoose=false;
					let tplName=[];
					res.data.data.mts.forEach((item,index)=>{
						if(item.model_name!='刮刮奖'&&item.model_name!='摇一摇'&&item.model_name!='大转盘'&&item.model_name!='砸金蛋'&&item.model_name!='问卷调查'&&item.model_name!='报名'&&item.model_name!='全民猜猜猜'&&item.model_name!='猜涨跌'&&item.model_name!='猜口令'&&item.model_name!='签到'){
							tplName.push(item);
						} 	
					});
					
					vm.$store.state.publicAll.tplName=tplName;
					let arr=[];
					res.data.data.mts[0].tpls.forEach((item,index)=>{
						// if(){
							if(item.template!='shake'&&item.template!='roulette'&&item.template!='golden-eggs'&&item.template!='quiz'&&item.template!="enroll"&&item.template!='exponent'&&item.template!='caizhangdie'&&item.template!='check-in'){
								arr.push(item);
							}
						// }
					});
					vm.$store.state.publicAll.tplAll=arr;
					vm.pagination(1,vm.$store.state.publicAll.tplAll);
					vm.total=res.data.data.mts[0].tpls.length;
					vm.$store.state.publicAll.tplList=res.data.data.mts;
					// vm.errorText=''
				})
			},

			eventMouseenter(e,item){
				console.log(e);
				console.log(item);
			},
			//点击当前的页数
            pageChange(a){
                this.current_page=a;
				this.pagination(a,this.$store.state.publicAll.tplAll);
            },
			//分页效果
			pagination(index,data){
				let vm = this;
				vm.total=data.length;
				vm.loadingChoose=true;
				vm.$store.state.publicAll.tableData=[];
				setTimeout(function(){
					vm.loadingChoose=false;
					vm.$store.state.publicAll.tableData = data.slice((index-1)*vm.limit,(index-1)*vm.limit+vm.limit);
				},400);
			},
		},
		mounted(){
			//选择分类模板
			if(this.$store.state.publicAll.tplAll.length==0){
				this.fetchPrdList();
			}else{
				this.activeTbsSpan=this.$store.state.publicAll.modelIdIndex;
				this.pagination(1,this.$store.state.publicAll.tplAll);
			}
			
		},
		components:{
			QRCode
		}
	}
</script>
<style lang="less" scoped>
	@import './../../style/chooseTemplate';
	.page-footer{
        width:100%;
        height: 87px;
        box-sizing: border-box;
        padding: 30px;
        background: #ffffff;
    }

</style>